import React from "react";
import "./style.scss";
import { Form, Input, Button, message as antdMessage  } from "antd";
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
const Index = () => {
  const navigate = useNavigate()
  const onFinish = async (value) => {
    const resp = await axios.post('/api/login', value)
    const { code, data, message } = resp.data;
    if(code === 200) {
      antdMessage.success(message);
      navigate('/');
      localStorage.setItem('token', data.token)
      localStorage.setItem('userInfo', JSON.stringify(data.userInfo))
    } else {
      antdMessage.error(message)
    }
  }
  return (
    <div className="login">
      <div className="login-box">
        <Form onFinish={onFinish}>
          <Form.Item label="账号" name="username">
            <Input></Input>
          </Form.Item>
          <Form.Item label="密码" name="password">
            <Input></Input>
          </Form.Item>
          <Form.Item>
            <Button htmlType="submit" block type="primary">登录</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Index;
